<template>
  <div class="container">
    <button hover-class="button-hover" @click="init_doc()">下载文档</button>
    <div class="my-echarts" ref="echarts_box"></div>
  </div>
</template>

<script lang="ts" setup>
import * as docx from "docx";
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import xzhqDocx from "../utils/docx";
import { docx_arr } from "../assets/data/index";

onMounted(() => {
  //init_ecahrts();
});
const echarts_box = ref();
let myChart = ref();

async function init_doc() {
  new xzhqDocx(docx_arr);

  //   const img_url = new URL("../assets/image/img1.png", import.meta.url);
  //   const res = await fetch(img_url.href);
  //   const blob = await res.blob();
  //   let echarts_blob = myChart.value.getDataURL({
  //     type: "png",
  //     pixelRatio: 2,
  //     backgroundColor: "#fff",
  //   });
  //   const arr = [1, 2, 3, 4, 5];
  //   const doc = new docx.Document({
  //     sections: [
  //       {
  //         children: [
  //           new docx.Table({
  //             alignment: docx.AlignmentType.CENTER,
  //             width: {
  //               size: 4535 * 2,
  //               type: docx.WidthType.DXA,
  //             },
  //             rows: [
  //               new docx.TableRow({
  //                 children: [
  //                   new docx.TableCell({
  //                     children: [
  //                       new docx.Table({
  //                         alignment: docx.AlignmentType.CENTER,
  //                         width: {
  //                           size: 3000,
  //                           type: docx.WidthType.DXA,
  //                         },
  //                         rows: [
  //                           new docx.TableRow({
  //                             children: [
  //                               new docx.TableCell({
  //                                 borders: {
  //                                   top: {
  //                                     style: docx.BorderStyle.DASH_DOT_STROKED,
  //                                     size: 0,
  //                                     color: "ffffff",
  //                                   },
  //                                 },
  //                                 children: [
  //                                   new docx.Paragraph({
  //                                     alignment: docx.AlignmentType.CENTER,
  //                                     children: [
  //                                       new docx.TextRun({
  //                                         text: "影像特征",
  //                                       }),
  //                                     ],
  //                                   }),
  //                                 ],
  //                               }),
  //                             ],
  //                           }),
  //                           new docx.TableRow({
  //                             children: [
  //                               new docx.TableCell({
  //                                 children: [
  //                                   new docx.Table({
  //                                     alignment: docx.AlignmentType.CENTER,
  //                                     width: {
  //                                       size: 3000,
  //                                       type: docx.WidthType.DXA,
  //                                     },
  //                                     rows: [
  //                                       new docx.TableRow({
  //                                         children: [
  //                                           new docx.TableCell({
  //                                             borders: {
  //                                               top: {
  //                                                 style: docx.BorderStyle.DASH_DOT_STROKED,
  //                                                 size: 0,
  //                                                 color: "ffffff",
  //                                               },
  //                                               left: {
  //                                                 style: docx.BorderStyle.DASH_DOT_STROKED,
  //                                                 size: 0,
  //                                                 color: "ffffff",
  //                                               },
  //                                               bottom: {
  //                                                 style: docx.BorderStyle.DASH_DOT_STROKED,
  //                                                 size: 0,
  //                                                 color: "ffffff",
  //                                               },
  //                                             },
  //                                             children: [
  //                                               new docx.Paragraph({
  //                                                 alignment: docx.AlignmentType.CENTER,
  //                                                 children: [
  //                                                   new docx.TextRun({
  //                                                     text: "2023年第二季度影响",
  //                                                   }),
  //                                                 ],
  //                                               }),
  //                                             ],
  //                                           }),
  //                                           new docx.TableCell({
  //                                             borders: {
  //                                               top: {
  //                                                 style: docx.BorderStyle.DASH_DOT_STROKED,
  //                                                 size: 0,
  //                                                 color: "ffffff",
  //                                               },
  //                                               right: {
  //                                                 style: docx.BorderStyle.DASH_DOT_STROKED,
  //                                                 size: 0,
  //                                                 color: "ffffff",
  //                                               },
  //                                               bottom: {
  //                                                 style: docx.BorderStyle.DASH_DOT_STROKED,
  //                                                 size: 0,
  //                                                 color: "ffffff",
  //                                               },
  //                                             },
  //                                             children: [
  //                                               new docx.Paragraph({
  //                                                 alignment:
  //                                                   docx.AlignmentType.CENTER,
  //                                                 children: [
  //                                                   new docx.TextRun({
  //                                                     text: "2024年第一季度影响",
  //                                                   }),
  //                                                 ],
  //                                               }),
  //                                             ],
  //                                           }),
  //                                         ],
  //                                       }),
  //                                     ],
  //                                   }),
  //                                 ],
  //                               }),
  //                             ],
  //                           }),
  //                         ],
  //                       }),
  //                     ],
  //                   }),
  //                   new docx.TableCell({
  //                     children: [
  //                       new docx.Paragraph({
  //                         alignment: docx.AlignmentType.CENTER,
  //                         children: [
  //                           new docx.TextRun({
  //                             text: "蓄滞洪区名称",
  //                           }),
  //                         ],
  //                       }),
  //                     ],
  //                   }),
  //                   new docx.TableCell({
  //                     children: [
  //                       new docx.Paragraph({
  //                         alignment: docx.AlignmentType.CENTER,
  //                         children: [
  //                           new docx.TextRun({
  //                             text: "数量",
  //                           }),
  //                         ],
  //                       }),
  //                     ],
  //                   }),
  //                   new docx.TableCell({
  //                     children: [
  //                       new docx.Paragraph({
  //                         alignment: docx.AlignmentType.CENTER,
  //                         children: [
  //                           new docx.TextRun({
  //                             text: "面积（m2）",
  //                           }),
  //                         ],
  //                       }),
  //                     ],
  //                   }),
  //                 ],
  //               }),
  //               // new docx.TableRow({
  //               //     children: [
  //               //         new docx.TableCell({
  //               //             children: [
  //               //                 new docx.Paragraph({
  //               //                     alignment: docx.AlignmentType.CENTER,
  //               //                     children: [
  //               //                         new docx.TextRun({
  //               //                             text: "1",
  //               //                         })
  //               //                     ]
  //               //                 })
  //               //             ]
  //               //         }),
  //               //         new docx.TableCell({
  //               //             children: [
  //               //                 new docx.Paragraph({
  //               //                     alignment: docx.AlignmentType.CENTER,
  //               //                     children: [
  //               //                         new docx.TextRun({
  //               //                             text: "小清河分洪区",
  //               //                         })
  //               //                     ]
  //               //                 })
  //               //             ]
  //               //         }),
  //               //         new docx.TableCell({
  //               //             children: [new docx.Paragraph({
  //               //                 alignment: docx.AlignmentType.CENTER,
  //               //                 children: [
  //               //                     new docx.TextRun({
  //               //                         text: "2",
  //               //                         color: "#ff3c4d",
  //               //                     })
  //               //                 ]
  //               //             })]
  //               //         }),
  //               //         new docx.TableCell({
  //               //             children: [new docx.Paragraph({
  //               //                 alignment: docx.AlignmentType.CENTER,
  //               //                 children: [
  //               //                     new docx.TextRun({
  //               //                         text: "2000",
  //               //                         color: "#ff3c4d",
  //               //                     })
  //               //                 ]
  //               //             })]
  //               //         }),
  //               //     ]
  //               // })
  //               ...get_random_xzhq(),
  //             ],
  //           }),
  //         ],
  //       },
  //     ],
  //   });
  //   docx.Packer.toBlob(doc).then((blob) => {
  //     const a = document.createElement("a");
  //     a.href = URL.createObjectURL(blob);
  //     a.click();
  //   });
}
function get_random_xzhq(): docx.TableRow[] {
  const rows: docx.TableRow[] = [];
  for (let i = 0; i < 28; i++) {
    const children: docx.TableCell[] = [];
    for (let j = 0; j < 4; j++) {
      const cell = new docx.TableCell({
        children: [
          new docx.Paragraph({
            alignment: docx.AlignmentType.CENTER,
            children: [
              new docx.TextRun({
                text: "2000",
                color: j > 1 ? "#ff3c4d" : "#000000",
                size: 21,
              }),
            ],
          }),
        ],
        margins: {
          top: 100,
          bottom: 100,
        },
      });
      children.push(cell);
    }
    const cell = new docx.TableRow({ children });
    rows.push(cell);
  }
  return rows;
}
function init_ecahrts() {
  myChart.value = echarts.init(echarts_box.value);
  const option = {
    title: [
      {
        text: "Radial Polar Bar Label Position (middle)",
      },
    ],
    polar: {
      radius: [30, "80%"],
    },
    radiusAxis: {
      max: 4,
    },
    angleAxis: {
      type: "category",
      data: ["a", "b", "c", "d"],
      startAngle: 75,
    },
    tooltip: {},
    series: {
      type: "bar",
      data: [2, 1.2, 2.4, 3.6],
      coordinateSystem: "polar",
      label: {
        show: true,
        position: "middle",
        formatter: "{b}: {c}",
      },
    },
    animation: false,
  };
  myChart.value.setOption(option);
}

// new docx.Paragraph({
//                         alignment: docx.AlignmentType.CENTER,
//                         heading: docx.HeadingLevel.TITLE,
//                         children: [
//                             new docx.TextRun({
//                                 text: "海河流域重点蓄滞洪区卫星遥感监管项目卫星遥感解译报告",
//                                 font: "方正小标宋简体",
//                                 color: "#ff3c4d",
//                                 size: 56,
//                             })
//                         ]
//                     }),//                     new docx.Paragraph({
//                         alignment: docx.AlignmentType.CENTER,
//                     }),
//                     new docx.Paragraph({
//                         alignment: docx.AlignmentType.CENTER,
//                         children: [
//                             new docx.TextRun({
//                                 text: "第二期",
//                                 bold: true,
//                                 font: "楷体_GB2312",
//                                 color: "#000000",
//                                 size: 32,
//                             })
//                         ]
//                     }),
//                     new docx.Paragraph({
//                         alignment: docx.AlignmentType.JUSTIFIED,
//                         children: [
//                             new docx.TextRun({
//                                 text: "海河水利委员会",
//                                 bold: true,
//                                 font: "楷体_GB2312",
//                                 color: "#000000",
//                                 size: 32,
//                             }),
//                             new docx.TextRun({
//                                 text: "\t\t\t\t\t\t\t\t\t",
//                                 bold: true,
//                                 font: "楷体_GB2312",
//                                 color: "#000000",
//                                 size: 32,
//                             }),
//                             new docx.TextRun({
//                                 text: "2024年6月5日",
//                                 bold: true,
//                                 font: "Times New Roman",
//                                 color: "#000000",
//                                 size: 32,
//                             }),
//                         ]
//                     }),
//                     new docx.Paragraph({
//                         border: {
//                             bottom: {
//                                 color: "#ff3c4d",
//                                 space: 1,
//                                 style: "inset",
//                                 size: 6,
//                             }
//                         },
//                     }),
//                     new docx.Paragraph({
//                         alignment: docx.AlignmentType.CENTER,
//                     }),
//                     new docx.Paragraph({
//                         alignment: docx.AlignmentType.CENTER,
//                         children: [
//                             new docx.TextRun({
//                                 text: "2024",
//                                 font: "Times New Roman",
//                                 bold: true,
//                                 color: "#000000",
//                                 size: 44,
//                             }),
//                             new docx.TextRun({
//                                 text: "年第一季度卫星遥感解译成果报告",
//                                 font: "宋体",
//                                 bold: true,
//                                 color: "#000000",
//                                 size: 44,
//                             })
//                         ]
//                     }),
//                     new docx.Paragraph({
//                         alignment: docx.AlignmentType.CENTER,
//                     }),
//                     new docx.Paragraph({
//                         heading: docx.HeadingLevel.HEADING_2,
//                         children: [
//                             new docx.TextRun({
//                                 text: "1概论",
//                                 font: "宋体 (标题)",
//                                 bold: true,
//                                 color: "#000000",
//                                 size: 32,
//                             })
//                         ]
//                     }),
//                     new docx.Paragraph({
//                         alignment: docx.AlignmentType.CENTER,
//                     }),
//                     new docx.Paragraph({
//                         spacing: {
//                             line: 360,
//                         },
//                         children: [
//                             new docx.TextRun({
//                                 text: "\t为加强蓄滞洪区监管，海河水利委员会对海河流域28个重点蓄滞洪区开展非防洪建设项目遥感监测，以季度为周期，开展4期小清河分洪区非防洪建设项目图斑解译，提供“未批先建”图斑及相关分析成果；开展2期其他27处国家蓄滞洪区非防洪建设项目图斑解译，提供“未批先建”图斑及相关分析成果，为蓄滞洪区监管提供线索。",
//                                 size: 24,
//                                 font: "宋体 (正文)",
//                                 color: "#000000"
//                             }),
//                             new docx.PageBreak()
//                         ]
//                     }),
//                     new docx.Paragraph({
//                         alignment: docx.AlignmentType.CENTER,
//                         children: [
//                             new docx.ImageRun({
//                                 type: "png",
//                                 data: blob,
//                                 transformation: {
//                                     width: 420,
//                                     height: 600,
//                                 },
//                             })
//                         ]
//                     }),
//                     new docx.Paragraph({
//                         alignment: docx.AlignmentType.CENTER,
//                         children: [
//                             new docx.TextRun({
//                                 text: "图1.海河流域28个蓄滞洪区分布图",
//                                 color: "#000000",
//                                 size: 24,
//                             }),
//                         ]
//                     }),
//                     new docx.Paragraph({
//                         alignment: docx.AlignmentType.CENTER,
//                     }),
//                     new docx.Paragraph({
//                         spacing: {
//                             line: 360,
//                         },
//                         children: [
//                             new docx.TextRun({
//                                 text: "\t以GF6、GF-1B、GF-1C、GF-1D、GF1、GF2、ZY3-01、ZY1-02C、CBERS-02B、ZY3-02等10颗国产高分辨率遥感卫星为数据源，分别以2024年2月15日、2024年5月15日为目标时间点，筛选前后各三十天范围内空间分辨率优于2米的遥感影像，制作获取2024年第一季度和2024年第二季度两期海河流域蓄滞洪区覆盖数据。在此基础上，借助人工智能技术，进行新增非防洪建设项目图斑解译，对面积大于1000m2的图斑进行人工修整，并进行所属行政区、监管类型等属性编辑统计，得到海河流域蓄滞洪区新增非防洪建设项目图斑分布图和统计图表。",
//                                 color: "#000000",
//                                 size: 24,
//                                 font: "宋体 (正文)",
//                             }),
//                             new docx.PageBreak()
//                         ]
//                     }),
//                     new docx.Paragraph({
//                         heading: docx.HeadingLevel.HEADING_2,
//                         children: [
//                             new docx.TextRun({
//                                 text: "2遥感解译成果",
//                                 font: "宋体 (标题)",
//                                 bold: true,
//                                 color: "#000000",
//                                 size: 32,
//                             })
//                         ]
//                     }),
//                     new docx.Paragraph({
//                         alignment: docx.AlignmentType.CENTER,
//                     }),
//                     new docx.Paragraph({
//                         spacing: {
//                             line: 360,
//                         },
//                         children: [
//                             new docx.TextRun({
//                                 text: "\t根据2024年第一季度和2024年第二季度两期遥感影像进行非防洪建设项目变化检测提取的新增非防洪建设项目（遥感解译成果见附件3），统计新增非防洪建设项目数量和面积，统计结果如下：",
//                                 size: 24,
//                                 font: "宋体 (正文)",
//                                 color: "#000000"
//                             }),
//                         ]
//                     }),
//                     new docx.Paragraph({
//                         alignment: docx.AlignmentType.CENTER,
//                         children: [
//                             new docx.TextRun({
//                                 text: "表1 2024年第2季度海河流域蓄滞洪区新增非防洪建设项目统计",
//                                 color: "#000000",
//                                 size: 24,
//                             }),
//                         ]
//                     }),
//                     new docx.Paragraph({
//                         alignment: docx.AlignmentType.CENTER,
//                     }),
</script>

<style lang="scss" scoped>
.container {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.my-echarts {
  width: 500px;
  height: 500px;
}
</style>